<template>
    <div class="home">
        <div class="content">
            <div>Smart Campus For HNJM</div>
            <div class="logo">
                <h1>智慧经贸</h1>
                <img src="http://www.hnjmxy.cn/images/db_logo.jpg" alt="">
            </div>
            <swiper :show-dots="false" loop height="80vw" :interval=3000>
                <swiper-item v-for="(item,index) in dataList" :key="index">
                    <div class="smallTitle">{{item.smallTitle}}</div>
                    <div class="title">{{item.title}}</div>
                    <div class="look">{{item.look}}</div>
                    <div class="banner">
                        <img :src="item.img" alt="">
                    </div>
                </swiper-item>
            </swiper>
            <div class="message">
                消息中心
            </div>
            <tab  custom-bar-height="1px">
                <tab-item selected>未读</tab-item>
                <tab-item>已读</tab-item>
                <tab-item>全部</tab-item>
            </tab>
            <div style="text-align:center;">
                <h1>暂无消息</h1>
            </div>
        </div>
    </div>
</template>

<script>
    import {Swiper, SwiperItem, Tab, TabItem} from 'vux'

    export default {
        name: "home",
        data: function () {
            return {
                dataList: [
                    {
                        smallTitle: '我的轨迹',
                        title: '轨迹考勤-记录我的经贸完美生活',
                        look: '查看在校期间活动记录',
                        img: ''
                    },
                    {
                        smallTitle: '我的轨迹',
                        title: '轨迹考勤-记录我的经贸完美生活',
                        look: '查看在校期间活动记录',
                        img: ''
                    },
                    {
                        smallTitle: '我的轨迹',
                        title: '轨迹考勤-记录我的经贸完美生活',
                        look: '查看在校期间活动记录',
                        img: ''
                    },
                    {
                        smallTitle: '我的轨迹',
                        title: '轨迹考勤-记录我的经贸完美生活',
                        look: '查看在校期间活动记录',
                        img: ''
                    }
                ],
                false: false,
            }
        },
        methods: {

        },
        components: {
            Swiper, SwiperItem, Tab, TabItem
        }
    }
</script>

<style scoped>
    .content {
        padding: 8vw 4vw;
    }

    .content .logo {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .logo {
        padding-bottom: 6vw;
        border-bottom: 1px solid #000;
    }

    .logo img {
        border-radius: 50%;
        width: 12vw;
        height: 12vw;
    }

    .logo h1 {
        font-size: 8vw;
        margin: 0;
    }

    .smallTitle {
        margin-top: 4vw;
        font-size: 4vw;
        color: #48a5f4;
    }

    .title {
        font-size: 6vw;
        margin: 2vw 0;
    }

    .look {
        font-size: 5vw;
        color: #ccc;
        margin-bottom: 4vw;
    }

    .banner {
        width: 100vw;
        height: 40vw;
        background: red;
    }

    .message {
        text-align: center;
    }

    .message:before {
        content: '——————';
        color: #ccc;
        margin-right: 4vw;
    }

    .message:after {
        content: '——————';
        color: #ccc;
        margin-left: 4vw;
    }
</style>
